<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>完整动态柱状图</title>
	<script type="text/javascript" src="../js/d3.js"></script>  
	<script type="text/javascript" src="../js/d3.min.js"></script>  
	<style>	
	.axis path,
	.axis line{
		fill: none;
		stroke: black;
		shape-rendering: crispEdges;
	}

	.axis text {
		font-family: sans-serif;
		font-size: 11px;
	}

	.MyRect {
		fill: steelblue;
	}

	.MyText {
		fill: white;
		text-anchor: middle;
	}

   </style>
</head>
<body>	
	<script type="text/javascript">
    
    	//添加一个画布，定义它的大小
		var width=400;
    	var height=400;
		
		var svg=d3.select("body")
				.append("svg")
    			.attr("width",width)
    			.attr("height",height);
    	
		//画布周边的空白
		var padding = {left:30, right:30, top:20, bottom:20};
		
		//给定一组数据，此后改为从后端接收数据放入数组
    	var dataset=[10,25,30,15,14,5];
		
		//定义x轴与y轴的比例尺
		var xScale=d3.scale.ordinal()     //x轴使用序数比例尺
    				.domin(d3.range(dataset.length))   //比例尺的定义域为【1，data.lengh】
					.rangeRoundBands([0, width - padding.left - padding.right]);   //值域为【0，画布宽度减去左右空白】
					
		var yScale=d3.scale.linear()	  //y轴使用线性比例尺
					.domin([0,d3.max(dataset)])        //定义域为【0，max(dataset)】
					.range([height - padding.top - padding.bottom, 0]);     //值域为【画布高度减去上下空白，0】
    	
    	//定义x轴
		var xAxis = d3.svg.axis()
			.scale(xScale)
			.orient("bottom");
			
		//定义y轴
		var yAxis = d3.svg.axis()
			.scale(yScale)
			.orient("left");

		//矩形之间的空白
		var rectPadding = 4;
	
		//添加矩形元素
		var rects = svg.selectAll(".MyRect")
			.data(dataset)
			.enter()
			.append("rect")
			.attr("class","MyRect")
			.attr("transform","translate(" + padding.left + "," + padding.top + ")")
			.attr("x", function(d,i){
				return xScale(i) + rectPadding/2;
			} )
			.attr("y",function(d){
				return yScale(d);
			})
			.attr("width", xScale.rangeBand() - rectPadding )
			.attr("height", function(d){
				return height - padding.top - padding.bottom - yScale(d);
			});
	
		//添加文字元素
		var texts = svg.selectAll(".MyText")
			.data(dataset)
			.enter()
			.append("text")
			.attr("class","MyText")
			.attr("transform","translate(" + padding.left + "," + padding.top + ")")
			.attr("x", function(d,i){
				return xScale(i) + rectPadding/2;
			} )
			.attr("y",function(d){
				return yScale(d);
			})
			.attr("dx",function(){
				return (xScale.rangeBand() - rectPadding)/2;
			})
			.attr("dy",function(d){
				return 20;
			})
			.text(function(d){
				return d;
			});
	
		//添加x轴
		svg.append("g")
			.attr("class","axis")
			.attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")")
			.call(xAxis); 
			
		//添加y轴
		svg.append("g")
			.attr("class","axis")
			.attr("transform","translate(" + padding.left + "," + padding.top + ")")
			.call(yAxis);
    </script>
</body>
</html>
